import { darkWhiteButtonTheme, lightWhiteButtonTheme } from 'theme';

import Button, { ButtonProps } from '@mui/material/Button';
import { ThemeProvider, useTheme } from '@mui/material/styles';

export default function WhiteButton(props: ButtonProps) {
  const theme = useTheme();
  const whiteTheme =
    theme.palette.mode === 'dark'
      ? darkWhiteButtonTheme
      : lightWhiteButtonTheme;
  return (
    <ThemeProvider theme={whiteTheme}>
      <span>
        <Button
          {...props}
          sx={{
            ':hover': {
              backgroundColor: 'white'
            }
          }}
        />
      </span>
    </ThemeProvider>
  );
}
